<template>
  <div class="student">
    <div class="header">
      <el-input v-model="input1" placeholder="请输入学生姓名" size="Small" class="input" />
      <el-input v-model="input2" placeholder="请输入学籍号或身份证号" size="Small" class="input"/>
      <el-input v-model="input3" placeholder="请输入账号" size="Small" class="input" />
      <el-button type="primary" size="Small">查询</el-button>
      <el-button type="primary" size="Small" class="add" @click="addstudent" >新增</el-button >
    </div>
    <div class="main">
      <el-table
        :data="tableData"
        border="true"
        stripe="true"
        class="table"
        style="width: 100%"
      >
        <el-table-column  label="序号" width="60" align="center">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属学校" width="120" align="center">
          <template #default="scope">
            <span>{{ scope.row.classes.school.name}}</span>  
          </template>
        </el-table-column>
        <el-table-column label="年级班级" width="120" align="center">
          <template #default="scope">
            <span>{{ scope.row.classes.gradeId + "年级" + scope.row.classes.classId + "班"}}</span>  
          </template>
        </el-table-column>
        <el-table-column  label="姓名" width="100" align="center">
          <template #default="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="76" align="center" />
        <el-table-column  label="学籍号" width="110" align="center">
          <template #default="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column  label="证件类型" width="100" align="center">
          <template #default="scope">
            <span>{{ scope.row.documentType }}</span>
          </template>
        </el-table-column>
        <el-table-column  label="证件号码" width="180" align="center">
          <template #default="scope">
            <span>{{ scope.row.documentNum }}</span>
          </template>
        </el-table-column>
        <el-table-column  label="手机号码" width="120" align="center">
          <template #default="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="alt" label="操作">
          <template #default="scope">
            <el-button type="danger" width="100" align="center" @click="handleDelete(scope.row.id)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <paging
        v-if="pagState"
        @pag="handlePag"
        @pag-add="handlePagAdd"
        @pag-reduce="handlePagReduce"
        @pag-skip="handleSkip"
        :msg="pageList"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, defineAsyncComponent, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElNotification } from 'element-plus'
import server from "../../../../api";
// 引入异步分页组件
const paging = defineAsyncComponent(
  () => import("../../../../components/paging.vue")
);
var router = useRouter();

const input1 = ref("");
const input2 = ref("");
const input3 = ref("");
const value = ref("");

// let tableData = reactive([])

let tableData = reactive([]); // 表格数据存贮(渲染数据)
let inFormList = ref(); // 表格数据获取
let pages = ref(1); // 当前页
let total = ref(5); // 条数
let pagState = ref(false); // 当获取到数据展示分页

let pageList = ""; // 分页数据，需要传递给分页子组件

//发请求
const getRes = async (pagDate: { cp: number; ps: number }) => {
  const res = await server.yonghutongji.getstudent_bypage(pagDate);
  // console.log(res.data.data);
  // console.log(res.data.data.date);
  
  inFormList.value = res.data.data.date; // 表格数据
  pageList = res.data.data.page; // 分页数据
  pagState.value = true; // 当有数据展示分页条

  // 对获取的对象数据转化为数组形式
  for (let i = 0; i < inFormList.value.length; i++) {
    tableData.push(inFormList.value[i]);
  }
};

//删除单行数据
var handleDelete = async (row:any)=>{
 var res = await server.yonghutongji.delete_student(row.id)
 if(res.data.code == 200){
  ElNotification.success({message:'删除数据成功!'});
  var x = inFormList.value.findIndex(item=>item.id == row.id)
  if(x != -1){
    inFormList.value.splice(x,1);
  }
 }
} 
getRes({ cp: pages.value, ps: total.value });

// 分页条数更改数据
function listMain(upDate: { pages: number; total: number }) {
  tableData.length = 0; // 清空分页
  getRes({ cp: upDate.pages - 1, ps: upDate.total });
}

// 条数变更 --- 处理 分页组件 handlePag 事件
function handlePag(value: { pages: number; total: number }) {
  listMain(value);
}
// 增加
function handlePagAdd(value: { pages: number; total: number }) {
  listMain(value);
}

// 减少
function handlePagReduce(value: { pages: number; total: number }) {
  listMain(value);
}

// 跳转
function handleSkip(value: { pages: number; total: number }) {
  listMain(value);
}

//  点击跳转到新增学生列表页面
 var addstudent = ()=>{
  router.push('/index/yonghutongzhi/studentadd')
 }
</script>

<style scoped>
.gaikuang {
  margin: 20px;
}
.header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}
.header .input {
  width: 200px;
  margin-right: 20px;
}
.header .select {
  width: 80px;
}
.header .add {
  margin-left: 280px;
}
.main .table {
  margin: auto;
}
</style>